<script setup>
import {saveApi} from "@/api/DeptAPI";
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listApi} from "@/api/RoomAPI";
import {getResponseData} from "@/utils";

// 表单数据 + 表单规则
let optionItems = [];
let items = shallowRef([
  {'label': '部门名称', 'prop': 'title'},
  {'label': '所在房间', 'prop': 'fkRoomId', 'type': 'select', 'optionItems': optionItems},
  {'label': '部门描述', 'prop': 'info', 'type': 'textarea'},
]);
let data = shallowReactive({});
let rules = {
  'info': RULE.COMMON_INFO,
  'title': RULE.COMM_TITLE,
};

function success() {
  setTimeout(() => router.push('/Dept'), 1000);
}

// 查询房间全部记录
async function listRoom(){
  let res = await listApi();
  let rooms = getResponseData(res);
  if (rooms){
    for (let i in rooms){
      optionItems.push({'label': rooms[i]['title'], 'value': rooms[i]['id']})
    }
  }
}

/*======================= 加载函数 ===========================*/
onMounted(() => {
  listRoom();
})

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '员工管理'},
    {'icon': 'User', 'label': '部门列表', 'url': '/Dept'},
    {'icon': 'User', 'label': '添加部门'},
  ]"/>

  <el-divider/>
  <my-form type="insert" width="65%"
           :span="1"
           :items="items"
           :data="data"
           :rules="rules"
           :api="saveApi"
           :fn="success"
  />

</template>

<style scoped lang="scss">
</style>